<template>
  <!-- 顶部栏 -->

	<view class="forget-page">


		<!-- logo -->
		<view class="logo-box">
			<image class="logo-img" src="/static/logo.png" mode="aspectFit" />
		</view>
		<!-- 输入框 -->
		<form class="input-box" :model="loginForm" @submit="onSubmit" :rules="rules" >
			<view class="input-box">
				<view class="input-row">
					<image class="input-icon" src="/static/login_phone.png" mode="aspectFit" />
					<input class="input" type="text" v-model="loginForm.phone" placeholder="请输入手机号" />
				</view>
				<view class="input-row">
					<image class="input-icon" src="/static/login_password.png" mode="aspectFit" />
					<input class="input" type="password" v-model="loginForm.password" placeholder="请输入新密码" />
				</view>
				<view class="input-row">
					<image class="input-icon" src="/static/login_password.png" mode="aspectFit" />
					<input class="input" type="password" v-model="loginForm.confirmPassword" placeholder="请再次输入新密码" />
				</view>
				<view class="input-row">
					<image class="input-icon" src="/static/login_phone.png" mode="aspectFit" />
					<input class="input" type="text" v-model="loginForm.code" placeholder="请输入短信验证码" />
					<text class="sms-btn" @click="getCode">{{buttonTxt}}</text>
				</view>
			</view>
		</form>

		<!-- 重置按钮 -->
		<view class="reset-btn-box">
			<button class="reset-btn" @click="onSubmit">重置</button>
		</view>

		<view class="login-btn-box">
			<view class="forget">
				<navigator class="toLogin" url="/pages/register/register" >注册</navigator >
				<navigator class="toForget forgetFont" url="/pages/login/login">登录</navigator >
			</view>
		</view>
	</view>
</template>

<script setup>
// 可根据实际需求引入逻辑
import { ref,reactive} from 'vue'
import { getPhoneCode,forget } from "@/api/member.js"
import { onLoad } from '@dcloudio/uni-app';
onLoad((options) => {
	console.log("onLoad");
	if((uni.getStorageSync("token") || '')){
		uni.switchTab({
			url: '/pages/index/index'
		});
	}
});
const loading  = ref(false);
const loginForm = reactive({
	phone: '',
	code: '',
	password:'',
	confirmPassword:'',
});
const codeDisabled = ref(false);
const buttonTxt = ref("获取验证码");

const getCode = async ()=>{
	if(codeDisabled.value) return;
	let phone = loginForm.phone;
	if(!phone) {
		uni.showModal({
			title: '提示',
			content: '请输入手机号'
		});
		return false;
	}
	buttonTxt.value = 60;
	codeDisabled.value=true;
	let countdown;
	const startCountdown = () => {
		countdown = setInterval(() => {
				if (buttonTxt.value > 1) {
					buttonTxt.value -= 1;
				} else {
					clearInterval(countdown);
					buttonTxt.value = "重新获取验证码";
					codeDisabled.value = false;
				}
		}, 1000);
	};
	try {
		startCountdown();
		let res = await getPhoneCode({ phone: phone });
	} catch (err) {
		clearInterval(countdown);
		buttonTxt.value = "获取验证码";
		codeDisabled.value = false;
		console.error('请求失败：', err);
	} finally {
		loading.value = false;
	}
}

//提交表单
const onSubmit =  async ()=>{
	console.log("dd");
	let isValid = await validateForm();
	    // 如果表单数据不合法，则终止操作
	if (!isValid) return;
	console.log("dddd");
	loading.value = true;
	console.log(loginForm);
	let result = await forget(loginForm).then(res=>{
			if (res) {
				console.log('Registration successful:', res);
				uni.showModal({
					title: '提示',
					content: '修改成功',
					showCancel: false,
					success: () => {
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}
				});
			} else {
				console.error('Registration failed:', res?.message || 'Unknown error');
			}
		}).catch(err=>{
			console.error('Registration failed:', err?.message || 'Unknown error');
	});

}

// 验证规则
const rules = {
	code: [
	  { required: true, message: '请输入短信验证码', trigger: 'change' }
	],
	confirmPassword: [
	  { required: true, message: '请输入确认密码', trigger: 'change' }
	],
	password: [
	  { required: true, message: '请输入密码', trigger: 'change' }
	],
	phone: [
	  { required: true, message: '请输入手机号', trigger: 'change' },
	  { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号', trigger: 'change' }
	]
};
const validateForm = async () => {
	const messages = Object.keys(rules).reduce((acc, key) => {
		const fieldRules = rules[key];
		const value = loginForm[key];
		for (const rule of fieldRules) {
			if (rule.required && !value) {
				acc = rule.message;
				//acc.push(rule.message);
				break;
			} else if (rule.pattern && !rule.pattern.test(value)) {
				acc = rule.message;
				//acc.push(rule.message);
				break;
			}
		}
		return acc;
	}, []);

	if (messages.length > 0) {
		uni.showModal({
				title: '提示',
				content: messages,
				icon: "none"
		});
		return false;
	}
	return true;
};
function goBack() {
	uni.navigateBack();
}
</script>

<style scoped>
.forget-page {
	min-height: 100vh;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 40rpx;
}

.top-menu {
	font-size: 36rpx;
	color: #fff;
	width: 40rpx;
	text-align: right;
}
.logo-box {
	margin-top: 60rpx;
	margin-bottom: 60rpx;
	width: 100%;
	display: flex;
	justify-content: center;
}
.logo-img {
	width: 160rpx;
	height: 160rpx;
	border-radius: 16rpx;
	background: #4a90e2;
}
.input-box {
	width: 80vw;
	max-width: 600rpx;
	margin-bottom: 48rpx;
}
.input-row {
	display: flex;
	align-items: center;
	background: #f2f2f2;
	border-radius: 60rpx;
	height: 80rpx;
	margin-bottom: 24rpx;
	padding: 0 32rpx;
	position: relative;
}
.input-icon {
	width: 36rpx;
	height: 36rpx;
	margin-right: 16rpx;
}
.input {
	flex: 1;
	border: none;
	background: transparent;
	font-size: 28rpx;
	color: #333;
	outline: none;
}
.sms-btn {
	color: #ff2d2d;
	font-size: 26rpx;
	margin-left: 18rpx;
	font-weight: bold;
}
.reset-btn-box {
	width: 80vw;
	max-width: 600rpx;
	margin-bottom: 40rpx;
	margin-top: 10rpx;
}
.reset-btn {
	width: 100%;
	height: 90rpx;
	background: #4a90e2;
	color: #fff;
	font-size: 32rpx;
	border-radius: 60rpx;
	border: none;
	font-weight: bold;
	box-shadow: 0 4rpx 16rpx rgba(74,144,226,0.10);
}
.login-btn-box {
	width: 80vw;
	max-width: 600rpx;
	margin-bottom: 60rpx;
  }
.forget{
  	display:flex;
  	margin: 25rpx 0;
}
.toLogin,.toForget{
  	text-align: center;
  	font-size: 30rpx;
  	flex: 1;
}
.forgetFont{
  	color: blue;
}
.loginForm{
	  margin: 0;
	  padding: 0;
}
.back-icon {
	font-size: 40rpx;
	color: #fff;
	width: 40rpx;
}
.back-icon image{
	width: 40rpx;
	height: 40rpx;
}
</style>
